<template>
    <div>
        <el-card>
            <el-form label-width="85px" :model="form" label-position="right" ref="formRef" :rules="formRules">
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="编号" prop="sendSampleNumber">
                            <el-input v-model="form.sendSampleNumber" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
                        <el-form-item prop="materialQuality">
                            <template #label>
                                <span style="color: #f56c6c;margin-right: 4px;">*</span>
                                <span style="display:inline-block;">登记人员</span>
                            </template>
                            <ts-select v-model="form.employeeId" :fileName="employeeFileName" :template="employeeProps"
                                :label="form.employeeName" inputWidth="300" @updateRow="employeeChange"
                                :key="key"></ts-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                        <el-form-item label="反馈日期" prop="testDate">
                            <el-date-picker v-model="form.testDate" type="date" placeholder="请选择日期"
                                value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item prop="sampleAuditId">
                            <template #label>
                                <span style="color: #f56c6c;margin-right: 4px;">*</span>
                                <span style="display:inline-block;">送样单</span>
                            </template>
                            <sc-table-select v-model="sample" inputWidth="300" :fileName="fileName" :apiObj="apiObj"
                                :table-width="700" :props="sampleAuditProps" @change="sampleAuditChange" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
                        <el-form-item label="样品评审表" prop="testDate">
                            <span class="link-type" @click="toDetail">{{ form.sampleAuditNumber }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                        <el-form-item label="客户名称" prop="custName">
                            <el-input v-model="form.custName" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card header="测试指标" style="margin-top: 10px;">
            <el-table :data="dataList" ref="table" width="400" border stripe :header-cell-style="{ 'color': '#000' }">
                <el-table-column label="样品编号" prop="sendSampleDtl.mtlNo" width="120">
                </el-table-column>
                <el-table-column label="样品名称" prop="sendSampleDtl.mtlName"></el-table-column>
                <el-table-column label="样品规格" prop="sendSampleDtl.mtlSpec" width="120"></el-table-column>
                <el-table-column label="送样数量" prop="sendSampleDtl.qty"></el-table-column>
                <el-table-column label="模具" width="120">
                    <template #default="scope">
                        <el-input v-model="scope.row.moldName"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="量产" align="center">
                    <el-table-column label="量产否" width="130">
                        <template #default="scope">
                            <el-select v-model="scope.row.ableProduct" clearable placeholder="请选择：">
                                <el-option v-for="item in configData.ableProductList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="量产计划时间" width="160">
                        <template #default="scope">
                            <el-date-picker style="width:90%;" v-model="scope.row.productDate" type="date"
                                placeholder="请选择日期" value-format="YYYY-MM-DD" />
                        </template>
                    </el-table-column>
                    <el-table-column label="不能量产原因" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.notProductReason"></el-input>
                        </template>
                    </el-table-column>
                </el-table-column>
                <div v-for="(item, index) in testRequireList" :key="index">
                    <el-table-column :label="item.testParameterName">
                        <el-table-column label="客户要求">
                            <template #default="scope">
                                <div v-if="scope.row.itemList">{{ scope.row.itemList[index].custRequire }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="我司达到" width="120">
                            <template #default="scope">
                                <div v-if="scope.row.itemList">
                                    <el-select v-if="scope.row.itemList[index].dataList.length > 0"
                                        v-model="scope.row.itemList[index].testResult" clearable placeholder="请选择：">
                                        <el-option v-for="item in scope.row.itemList[index].dataList" :key="item.value"
                                            :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-input v-else v-model="scope.row.itemList[index].testResult"> </el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否通过" width="130">
                            <template #default="scope">
                                <div v-if="scope.row.itemList">
                                    <el-select v-model="scope.row.itemList[index].passedStatus" clearable
                                        placeholder="请选择：">
                                        <el-option v-for="item in configData.passedStatusList" :key="item.value"
                                            :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </div>
                <el-table-column label="是否全部通过" width="130">
                    <template #default="scope">
                        <el-select v-model="scope.row.sysJudgeResult" clearable placeholder="请选择：">
                            <el-option v-for="item in configData.sysJudgeResultList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="客户综合判定" width="130">
                    <template #default="scope">
                        <el-select v-model="scope.row.custJudgeResult" clearable placeholder="请选择：">
                            <el-option v-for="item in configData.sysJudgeResultList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="客户反馈信息" width="150">
                    <template #default="scope">
                        <el-input v-model="scope.row.remark"></el-input>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card header="上传附件" style="margin-top: 10px;">
            <tsMultiple v-model="fileList" :addTemplate="addTemplate" @updateIndex="updateIndex">
                <template #tableContent>
                    <el-table-column label="文件名" prop="fileName" width="120" />
                    <el-table-column label="图片" width="100">
                        <template #default="scope">
                            <el-image v-if="checkType(scope.row) == 'image'" alt="上传图片" :src="scope.row.fileFullPath"
                                @click="openDialog(scope.row.fileFullPath)"></el-image>
                            <video v-else-if="checkType(scope.row) == 'video'" :src="scope.row.fileFullPath" controls
                                style="width: 100%;height: 100%;"></video>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fileKind" label="类别">
                        <template #default="scope">
                            <el-select v-model="scope.row.fileKind">
                                <el-option v-for="item in configData.fileKindList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="itemIndex" label="排序">
                        <template #default="scope">
                            <el-input-number v-model="scope.row.itemIndex" :min="1"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注">
                        <template #default="scope">
                            <el-input v-model="scope.row.remark"></el-input>
                        </template>
                    </el-table-column>
                </template>
            </tsMultiple>
        </el-card>
        <el-card style="margin-top: 10px;margin-bottom:10px">
            <el-form-item label="备注">
                <el-input style="width: 900px;" v-model="form.remark" :autosize="{ minRows: 2 }" type="textarea"
                    placeholder="请输入" />
            </el-form-item>
        </el-card>
        <el-dialog v-model="dialogVisible">
            <img :src="dialogImageUrl" alt="Preview Image" w-full style="width: 100%;" />
        </el-dialog>
        <div class="sampleDialog"></div>
        <div class="button-position">
            <el-button @click="updateVisible">取 消</el-button>
            <el-button type="primary" @click="addSampleTest(formRef)">确 定</el-button>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, createVNode, render } from 'vue';
import Api from '@/api/model/sample'
import tsSelect from '@/components/scSelect/index.vue'
import sysApi from '@/api/model/system'
import tsMultiple from '@/components/tsUpload/multipe.vue'
import { ElMessageBox, ElNotification } from 'element-plus';
import { checkType } from '@/utils/checkType.js'
import tsLayer from '@/utils/useDialog'
const instance = getCurrentInstance()
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
const apiObj = ref(sysApi.select.query)
const form = ref({})
const formRef = ref(null)
const dataList = ref([])
const fileList = ref([])
const addTemplate = ref()
const dialogImageUrl = ref()
const dialogVisible = ref(false)
const sample = ref({
    id: '',
    number: ''
})
const key = ref(0)
const configData = ref({})
const testRequireList = ref({})
const employeeFileName = ref('ChooseEmployeeReport')
const employeeProps = {
    value: 'id',
    label: 'name'
}
const sampleAuditProps = {
    value: 'id',
    label: 'number'
}
const fileName = ref('WaitingTestSendSampleReport')
onMounted(() => {
    getInit()
})
const getInit = async (val) => {
    let param = {}
    if (val) {
        param = {
            id: val
        }
    }
    else {
        param = props.paramsData
    }
    let res = await Api.testResult.add.post(param)
    if (res.code == 200) {
        form.value = res.data
        configData.value = res.configData
        sample.value.id = form.value.sendSampleId
        sample.value.number = form.value.sendSampleNumber
        dataList.value = res.dataList
        testRequireList.value = res.testRequireList
        addTemplate.value = res.file
        key.value += 1
    }
}
const sampleAuditChange = (val) => {
    if (val) {
        getInit(val.id)
    }


}
const employeeChange = (val) => {
    form.value.employeeName = val.name
}
const updateIndex = () => {
    fileList.value.forEach((item, index) => {
        item.itemIndex = index + 1
    })
}
const openDialog = (val) => {
    dialogImageUrl.value = val
    dialogVisible.value = true
}
const toDetail = () => {
    const box = document.querySelector(".sampleDialog")
    let paramsData = {
        id: form.value.sampleAuditId
    }
    import(`@/views/sample/audittable/detailSampleAudit.vue`).then((res) => {
        const form = createVNode(res.default, {
            paramsData,
            onUpdatetable(val) {
                render(null, box)
            }
        })
        tsLayer.open({
            title: '查看样品评审表',
            width: '70%',
            fullScreen: false,
            appContext: instance.appContext,
            box: box,
            content: form
        })
    })
}
const updateVisible = (val) => {
    emit('updatetable')
}
const addSampleTest = async (formRef) => {
    await formRef.validate((valid, fields) => {
        if (valid) {
            addSampleTestData();
        }
    })
}

const addSampleTestData = () => {
    let result = []
    result = dataList.value.map(item => {
        return item.custJudgeResult
    })
    if (result.findIndex(item => { return item == 1 }) == -1) {
        form.value.needContinueSendSample = 0
        ElMessageBox.confirm('测试指标均为不通过是否需要继续操作。', '提示', {
            type: 'info',
            closeOnClickModal: false,
            center: true,
            confirmButtonText: '继续操作'
        }).then(() => {
            submit()
        }).catch(() => { })
    }
    else {
        submit()
    }
}
const submit = async () => {
    delete form.value.sendSample
    var params = {
        bean: form.value,
        dataList: dataList.value,
        fileList: fileList.value
    }
    var res = await Api.testResult.save.post(params);
    if (res.code == 200) {
        ElNotification.success({ title: '', message: '添加成功！', duration: 2000 });
        emit('updatetable', true);
    }
} 
</script>
<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }

    :deep(.el-textarea__inner) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;
    }
}

.link-type,
.link-type:focus {
    color: #337ab7;
    cursor: pointer;
}

.link-type:focus:hover,
.link-type:hover {
    color: #20a0ff
}
</style>